<template>
  <div class="center-map">
    <!-- <div class="center-map-tab tabbg">
      <div
        v-for="(item, index) in tabData"
        :key="index"
      ></div>
    </div> -->
    <!-- <div class="center-map-tab">
      <div
        v-for="(item, index) in tabData"
        :key="index"
        :hover="item.id"
        @click="clicktab(index)"
        :class="{select: index==selectIndex}"
      >
        {{item.name}}
      </div>
    </div> -->
    <div class="center-map-con">
      <auxiliarymonitorMap v-if="selectIndex==0" />
      <robotvideo v-if="selectIndex==1" />
      <rtvideo v-if="selectIndex==2" />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { mapinfo, robotvideo, rtvideo } from "../../components/map";
import { auxiliarymonitorMap } from "@/components";
interface tabType {
  name: string;
  id: string;
}

@Component({
  components: { auxiliarymonitorMap, robotvideo, rtvideo },
})
export default class centermap extends Vue {
  public tabData: tabType[] = [
    {
      name: "地图信息",
      id: "select1",
    },
    {
      name: "机器人巡检",
      id: "select2",
    },
    {
      name: "实时视频信息",
      id: "select3",
    },
  ];
  public selectIndex = 0;

  public clicktab(index: number) {
    this.selectIndex = index;
  }
}
</script>

<style lang="scss" scoped>
.center-map {
  width: 100%;
  height: 100%;
  position: relative;
  .tabbg {
    position: absolute;
    width: 100%;
    top: 0;
    > div {
      &:nth-child(1) {
        background-image: url("../../../../assets/img/HomePage/nor_bor_jq.png");
      }
      &:nth-child(2) {
        background-image: url("../../../../assets/img/HomePage/nor_bor_jq.png");
      }
      &:nth-child(3) {
        background-image: url("../../../../assets/img/HomePage/nor_bor_ss.png");
      }
    }
  }
  &-tab {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 0.35rem;
    position: absolute;
    width: 100%;
    top: 0;
    > div {
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      &:nth-child(1) {
        width: 1.65rem;
        height: 0.32rem;
        margin-left: 0.51rem;
      }
      &:nth-child(2) {
        width: 1.65rem;
        height: 0.32rem;
        margin: 0 -0.25rem;
      }
      &:nth-child(3) {
        width: 1.93rem;
        height: 0.33rem;
        margin-right: 0.37rem;
      }
    }
    [hover="select1"]:hover {
      background-image: url("../../../../assets/img/HomePage/cli_dt.png");
    }
    [hover="select2"]:hover {
      background-image: url("../../../../assets/img/HomePage/cli_dt.png");
    }
    [hover="select3"]:hover {
      background-image: url("../../../../assets/img/HomePage/cli_sssp.png");
    }
    .select[hover="select1"] {
      background-image: url("../../../../assets/img/HomePage/cli_dt.png");
    }
    .select[hover="select2"] {
      background-image: url("../../../../assets/img/HomePage/cli_dt.png");
    }
    .select[hover="select3"] {
      background-image: url("../../../../assets/img/HomePage/cli_sssp.png");
    }
  }
  &-con {
    position: absolute;
    top: 0.35rem;
    width: 100%;
    height: calc(100% - 0.35rem);
  }
}
</style>

